import React from 'react';
import { connect } from 'dva';
import { Form, Input, Button } from 'antd';
import styles from './IndexPage.css';


const FormItem = Form.Item;

function IndexPage(props) {

   const { form } = props;
   const { getFieldDecorator } = form;

  //  表单提交
   const handleSubmit = (e) => {
    e.preventDefault();
      form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log(values);
      }
    });

   }

  //  密码验证
  const passwordValidator = (rule, value, callback) => {
    const { getFieldValue } = form;
    if (value && value !== getFieldValue('password')) {
        callback('两次输入不一致！')
    }

    // 必须总是返回一个 callback，否则 validateFields 无法响应
    callback();
  }



  return (
    <div className={styles.normal}>
      <Form onSubmit={handleSubmit}>

        <FormItem label='名称：'>
          {getFieldDecorator('name', {
            rules: [{
            required: true,
            message: '名称不能为空',
          }],
         })(
              <Input placeholder="请输入名称"/>
          )}

        </FormItem>

          <FormItem label='密码：'>
          {getFieldDecorator('password', {
            rules: [{
              required: true,
              message: '密码不能为空',
            }, {
            min:4,
            message: '密码不能少于4个字符',
          }, {
            max:6,
            message: '密码不能大于6个字符',
          }],
         })(
              <Input placeholder="请输入密码" type="password"/>
          )}

        </FormItem>

          <FormItem label='确定密码：'>
          {getFieldDecorator('passwordcomfire', {
            rules: [{
              required: true,
              message: '请再次输入密码',
            }, {
              validator: passwordValidator
          }],
         })(
            <Input placeholder="请输入密码" type="password"/>
          )}

        </FormItem>


         <FormItem label='昵称：'>
          {getFieldDecorator('nickname', {
            rules: [{
            required: true,
            message: '昵称不能为空',
          }, {
            len: 4,
            message: '长度需4个字符',
          }],
         })(
            <Input placeholder="请输入昵称" />
          )}

        </FormItem>

        <FormItem label='爱好：'>
        {getFieldDecorator('hobody', {
            rules: [{
              whitespace: true,
              message: '不能输入空格',
          } ],
         })(
            <Input placeholder="请输入昵称" />
          )}
        </FormItem>

         <FormItem label='ABC：'>
        {getFieldDecorator('qbc', {
            rules: [{
              message:'只能输入数字',
              pattern: /^[0-9]+$/
          } ],
         })(
            <Input placeholder="请输入ABC" />
          )}
        </FormItem>

        <FormItem>
          <Button type="primary" htmlType="submit">提交</Button>
        </FormItem>

      </Form>


    </div>
  );
}

IndexPage.propTypes = {
};

const page = Form.create()(IndexPage);
export default connect()(page);
